import React from 'react'
import style from'./content.module.scss'

const optionTip = ['A','B','C','D']


const Content = (props) => {
  return (
    <div className={style.question}>
      <h3>{props.no}. {props.question}</h3>
      <ul>
        {props.options.map((it,index) =>
          <li key={index}>
            <input 
            type="radio" 
            name={props.question + props.no} 
            id={`${props.no}_${index}`}
            value={optionTip[index]}
            onChange={e => {
              props.onChange(props.index,e.target.value)
            }}
            disabled={props.isFinish}
            />
            <label htmlFor={`${props.no}_${index}`}>
              <span>{optionTip[index]}:</span>
              {it}
            </label>
          </li>
        )}
      </ul>
      {props.isError && <div style={{color:'red'}}>正确答案:{props.result}</div>}
    </div>
  )
}

export default Content